<template>
  <dv-border-box1 style="background-size: cover;" :color="['#ffeca8', 'gold']" :class="isFullScreen?'fullscreen-div':''"
                  class="back" ref="borderRef">
    <div
        style="width: 100%;height: 100%;background-size: cover;display: flex;flex-direction: column;">
      <div
          style="font-size: 32px;color: gold;margin-top: 16px;text-align: center;display: flex;flex-direction: row;padding: 0px 32px">

        <div style="display: flex;flex-direction: column;flex: 1;align-items: center">
          <div>
            <span style="justify-self: center;font-size: 42px">{{ userStore.race.name }}</span>
          </div>


          <span v-if="showInfo" style="justify-self: center">{{ showInfo.subName }}</span>
          <dv-decoration-5 :color="['#ff793e', '#ff793e']" style="width:80%;height:64px;margin-top: -20px"/>
          <img @click="playLive" style="width: 80px;position: absolute;left: 64px;top:16px;border-radius: 50%"
               src="../../../assets/images/云南省教指委.jpg">

          <img @click="playLive" style="width: 80px;position: absolute;right: 64px;top:16px;border-radius: 50%"
               src="../../../assets/images/鹤庆.jpg">

          <!--          <img @click="playLive" style="width: 180px;position: absolute;left: 32px;top:16px;border-radius: 16px"-->
          <!--               src="../../../assets/images/红河学院logo.png">-->
        </div>


        <!--        <audio loop style="display: none" ref="audioPlayer" :src="warning_play_audio" controls></audio>-->

        <!--        <audio style="display: none" ref="audioPlayer2" :src="onlotterySrc" controls></audio>-->


        <ExpandOutlined v-if="!isFullScreen" @click="fullScreen" style="font-size: 18px"/>

        <CompressOutlined v-else @click="exitFullScreen" style="font-size: 18px"/>
      </div>


      <div style="flex: 1;padding: 8px 32px;display: flex;flex-direction: row">
        <div style="flex: 2;background: white;margin: 8px;border-radius: 16px;padding: 16px;box-sizing: border-box">
          <div style="display: flex;flex-direction: column;height: 100%">


            <el-form-item label="组别" prop="schoolId">
              <el-select @change="onchangeGroup" clearable v-model="queryParams.groupId" placeholder="请选择">
                <el-option
                    v-for="item in groupList"
                    :key="item.id"
                    :label="item.gropuName"
                    :value="item.id">
                </el-option>
              </el-select>
              <a-button @click="queryParams.groupId=null;onchangeGroup()">重置组别搜索条件</a-button>
            </el-form-item>


            <div style="flex: 1;overflow-y: scroll;height: 0;min-height: 0">
              <el-tree
                  style="height: 140px"
                  :data="subjectOptions"
                  :props="{ label: 'label', children: 'children' }"
                  :expand-on-click-node="false"
                  :filter-node-method="filterNode"
                  ref="deptTreeRef"
                  node-key="id"
                  highlight-current
                  @node-click="handleNodeClick"
                  default-expand-all="true"
              />
            </div>
          </div>

        </div>

        <div style="flex: 4;background: white;margin: 8px;border-radius: 16px;background: #ececec">
          <div style="display: flex;flex-direction: column;height: 100%">
            <!--            <a-input size="large" v-model:value="inputValue"-->
            <!--                     :placeholder="'请输入' + selectItem.minScore + '-' +selectItem.maxScore + '分值'"/>-->
            <div style="flex-grow: 1;overflow-y: scroll;height: 0px">


              <a-collapse
                  @change="collapseChange"
                  accordion="true"
                  v-model:activeKey="activeKey"
                  :bordered="false"
                  style="background: rgb(255, 255, 255);margin: 16px"
              >
                <template #expandIcon="{ isActive }">
                  <caret-right-outlined :rotate="isActive ? 90 : 0"/>
                </template>
                <a-collapse-panel :key="item.objectId" v-for="(item,index) in orchestrateList">
                  <template v-slot:header>
                    <div style="display: flex;align-items: center;width: 100%">
                      <div
                          style="width: 32px;background: red;height: 32px;margin-right: 32px;margin-left: 32px;border-radius: 50%;color: white;display: flex;align-items: center;justify-content: center;font-weight: bolder;font-size: 20px">
                        {{ item.no }}
                      </div>
                      <image-preview v-if="false" :src="item.avatarSrc" :width="50" :height="50"/>
                      <dict-tag style="width: 64px;margin-left: 16px" :options="teacher_sex_type" :value="item.sex"/>
                      <div style="color: #5a5e66;width: 120px">
                        {{ queryParams.subName }}
                      </div>
                      <div style="color: #5a5e66">
                        {{ item.groupName }}
                      </div>
                      <div style="flex: 1">

                      </div>
                      <div @click.stop="showStuScore(item)" style="flex: 1">
                        <a-switch checked-children="公布" un-checked-children="不公布"
                                  v-bind:checked="item.subjectWithItem.baseScoreMap['0']!=null && item.subjectWithItem.baseScoreMap['0'].confirm">
                          确认
                        </a-switch>
                      </div>

                      <div style="flex: 2"></div>
                      <div style="width: 180px;font-size: 24px;font-weight: bolder">
                        <div style="display: flex;align-items: center" v-if="item.subjectWithItem.baseScoreMap['0']">
                          <div style="flex:1">
                            {{
                              item.subjectWithItem.baseScoreMap['0'] == null ? '' : item.subjectWithItem.baseScoreMap['0'].rawScore
                            }}
                          </div>
                          |
                          <div style="color: white;flex:1">
                      <span style="background: green;border-radius: 16px;padding: 4px">{{
                          item.subjectWithItem.baseScoreMap['0'] == null ? '' : item.subjectWithItem.baseScoreMap['0'].conversionScore
                        }}</span>
                          </div>

                        </div>
                        <div v-else>
                          未打分
                        </div>
                      </div>


                    </div>
                  </template>
                  <div>
                    <div style="display: flex;background: #e4e4e4;padding: 8px;border-radius: 8px">
                      <div style="width: 100px">子项名</div>
                      <div v-if="item.subjectWithItem.count>0" style="width: 160px">成绩一</div>
                      <div v-if="item.subjectWithItem.count>1" style="width: 160px">成绩二</div>
                      <div v-if="item.subjectWithItem.count>2" style="width: 160px">成绩三</div>
                      <div style="flex: 1">

                      </div>
                      <div style="width: 100px">最终成绩</div>
                    </div>
                    <div style="display: flex;margin: 8px 0px"
                         v-for="(item2,index) in item.subjectWithItem.baseSubItemList">
                      <div style="width: 100px"> {{ item2.itemName }}</div>
                      <div @click="showEidScore(item,1,item2)" v-if="item.subjectWithItem.count>0" style="width: 160px">
                        <div style="cursor: pointer;display: flex;justify-content: space-between">
                          <div v-if="item2.scoreHashMap['1']"
                               style="flex: 1;display: flex;align-items: center;">
                          <span v-if="item2.scoreHashMap['1'].rawScore" style="flex: 1;text-align: center">
                            {{ item2.scoreHashMap['1'].rawScore + item2.unit }}
                          </span>
                            <span v-else style="flex: 1;text-align: center">
                            --
                          </span>
                            <span style="flex: 1;text-align: center">
                            |
                          </span>
                            <span style="flex: 1;text-align: center;background: green;border-radius: 16px;color: white">
                            {{ item2.scoreHashMap['1'].conversionScore }}
                          </span>

                          </div>

                          <div v-else style="flex: 1;text-align: center">
                            <a-button size="small">打分</a-button>
                          </div>

                        </div>
                      </div>
                      <div @click="showEidScore(item,2,item2)" v-if="item.subjectWithItem.count>1" style="width: 160px">
                        <div style="cursor: pointer;display: flex;justify-content: space-between">
                          <div v-if="item2.scoreHashMap['2']"
                               style="flex: 1;display: flex;align-items: center;">
                          <span v-if="item2.scoreHashMap['2'].rawScore" style="flex: 1;text-align: center">
                            {{ item2.scoreHashMap['2'].rawScore + item2.unit }}
                          </span>
                            <span v-else style="flex: 1;text-align: center">
                            --
                          </span>
                            <span style="flex: 1;text-align: center">
                            |
                          </span>
                            <span style="flex: 1;text-align: center;background: green;border-radius: 16px;color: white">
                            {{ item2.scoreHashMap['2'].conversionScore }}
                          </span>

                          </div>

                          <div v-else style="flex: 1;text-align: center">
                            <a-button size="small">打分</a-button>
                          </div>

                        </div>
                      </div>
                      <div @click="showEidScore(item,3,item2)" v-if="item.subjectWithItem.count>2" style="width: 160px">
                        <div style="cursor: pointer;display: flex;justify-content: space-around">
                          <div v-if="item2.scoreHashMap['3']"
                               style="flex: 1;display: flex;align-items: center;">
                          <span v-if="item2.scoreHashMap['3'].rawScore" style="flex: 1;text-align: center">
                            {{ item2.scoreHashMap['3'].rawScore + item2.unit }}
                          </span>
                            <span v-else style="flex: 1;text-align: center">
                            --
                          </span>
                            <span style="flex: 1;text-align: center">
                            |
                          </span>
                            <span style="flex: 1;text-align: center;background: green;border-radius: 16px;color: white">
                            {{ item2.scoreHashMap['3'].conversionScore }}
                          </span>

                          </div>

                          <div v-else style="flex: 1;text-align: center">
                            <a-button size="small">打分</a-button>
                          </div>

                        </div>
                      </div>

                    </div>
                  </div>

                </a-collapse-panel>
              </a-collapse>

              <!--              <div @click="showKeyboard(item)" style="height: 64px;margin: 16px;background: white;border-radius: 16px;display: flex;flex-direction: row;align-items: center" v-for="(item,index) in orchestrateList">-->

              <!--              </div>-->
            </div>
            <div style="padding: 16px;display: flex;flex-direction: row">
              <div style="width:100px">

              </div>
              <a-pagination
                  style="flex: 1"
                  v-model:current="queryParams.pageNum"
                  pageSize="10"
                  :total="total"
                  @change="getList"
              />
              <a-button danger @click="getList()">刷新</a-button>
            </div>


          </div>
        </div>
      </div>

      <dv-decoration-7 :color="['#ffeca8', 'gold']" style="width:auto;height:26px;align-self: center;"><span
          style="color: gold;margin: 0px 16px">昆明云体科技有限公司技术支持</span></dv-decoration-7>
    </div>
  </dv-border-box1>

  <MyKeyboard @complete="complete" ref="keyBoard" :show="showKeyBoard">

  </MyKeyboard>


  <a-modal centered v-model:open="showFullWindow" title="Title" @ok="fullScreen">
    <p>全屏？</p>
  </a-modal>

  <a-modal v-if="selectItem" :footer="null" centered v-model:open="editScoreShow"
           :title="selectItem==null?'打分面板':selectItem.itemName + '打分面板'" @ok="handleOk">
    <div style="display: flex;flex-direction: column">
      <!--{{JSON.stringify(selectItem)}}-->
      <div style="display: flex;flex-direction: row">
        <a-input size="large" v-model:value="inputValue"
                 :placeholder="'请输入' + selectItem.minScore + '-' +selectItem.maxScore + selectItem.unit"/>
        <a-select size="large" style="width: 90px" v-model:value="inputValue">
          <a-select-option :value="-1">犯规</a-select-option>
          <a-select-option :value="-2">弃赛</a-select-option>
        </a-select>
      </div>
      <div style="margin-top: 8px" class="keyboard2">
        <div @click="input('1')" class="key2">
          <div>1</div>
        </div>
        <div @click="input('2')" class="key2">
          <div>2</div>
        </div>
        <div @click="input('3')" class="key2">
          <div>3</div>
        </div>
        <div @click="input('<')" class="key2">
          <div>
            <ArrowLeftOutlined/>
          </div>
        </div>
        <div @click="input('4')" class="key2">
          <div>4</div>
        </div>
        <div @click="input('5')" class="key2">
          <div>5</div>
        </div>
        <div @click="input('6')" class="key2">
          <div>6</div>
        </div>
        <div @click="input('-')" class="key2">
          <div>-</div>
        </div>
        <div @click="input('7')" class="key2">
          <div>7</div>
        </div>
        <div @click="input('8')" class="key2">
          <div>8</div>
        </div>
        <div @click="input('9')" class="key2">
          <div>9</div>
        </div>
        <div @click="input('cancel')" class="key2">
          <div style="background: #ff899b">取消</div>
        </div>
        <div @click="input(':')" class="key2">
          <div>：</div>
        </div>
        <div @click="input('.')" class="key2">
          <div>.</div>
        </div>
        <div @click="input('0')" class="key2">
          <div>0</div>
        </div>
        <div @click="input('confirm')" class="key2">
          <div style="background: #3dbaff">确定</div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import {useFullscreen} from '@vueuse/core'

const {isFullscreen, enter, exit, toggle} = useFullscreen();
import ElementResizeDetector from 'element-resize-detector';
import useUserStore from "@/store/modules/user.js";
import moment from "moment/moment.js";
import {message} from "ant-design-vue";
import {listUnit} from "@/api/business/unit";
import {listGroup} from "@/api/business/group.js";
import {ref} from "vue";
import {deptTreeSelect} from "@/api/business/subject.js";
import {getScoreItem, updateScore, stuReady, getAllLsmpZb, showStuInfo, updateStuScore} from "@/api/business/score";
import MyKeyboard from "@/components/MyKeyboard";

export default {
  name: "Index",
  components: {
    MyKeyboard,
  },
  data() {
    const customStyle =
        'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden';
    const userStore = useUserStore()
    const {proxy} = getCurrentInstance();
    const subName = ref("");
    const {base_confirm_status, teacher_sex_type} = proxy.useDict('base_confirm_status', 'teacher_sex_type');
    return {
      customStyle,
      activeNames: [],
      userId: userStore.id,
      isFullScreen: false,
      userStore,
      url: window.location.host + ":8080",
      timeText: '2024-23',
      selectItem: null,
      inputValue: '',
      showInfo: null,
      schoolList: [],
      groupList: [],
      queryParams: {},
      teacher_sex_type,
      subjectOptions: [],
      orchestrateList: [],
      tableLoading: false,
      total: 0,
      showKeyBoard: true,
      activeKey: [],
      showFullWindow: false,
      editScoreShow: false,
    }
  },
  mounted() {
    this.getSchoolList();
    this.getGroupList();
    this.getDeptTree();
    this.showFullWindow = true;
    // this.fullScreen();
    let that = this;
    setInterval(() => {
      that.timeText = moment(new Date()).format("YYYY年MM月DD日 HH:mm:ss");
    }, 1000)
  },
  methods: {
    collapseChange(e) {
      if (e != undefined) {
        for (let i = 0; i < this.orchestrateList.length; i++) {
          console.log(this.orchestrateList[i].objectId + "," + e)
          if(this.orchestrateList[i].objectId == e){
            this.stuReady(this.orchestrateList[i]);
          }

        }
      }
    },
    showEidScore(e, count, subItem) {
      this.selectItem = e;
      this.selectItem.count = count;
      this.selectItem.itemNo = subItem.itemNo;
      this.selectItem.itemName = subItem.itemName;
      this.selectItem.minScore = subItem.minScore;
      this.selectItem.maxScore = subItem.maxScore;
      this.selectItem.unit = subItem.unit;
      this.editScoreShow = true;
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      let that = this;
      deptTreeSelect().then(response => {
        console.log(response)
        that.subjectOptions = response.data;
      });
    },
    /** 查询学校列表 */
    getSchoolList() {
      let that = this;
      listUnit(
          {pageSize: 0}
      ).then(response => {
        that.schoolList = response.rows;
      });
    },
    getGroupList() {
      let that = this;
      listGroup(
          {pageSize: 0}
      ).then(response => {
        that.groupList = response.rows;
      });
    },
    completeScore() {
      console.log("dasd");
      this.showInfo = null;
      this.selectItem = null;
    },
    fullScreen() {
      this.showFullWindow = false;
      this.isFullScreen = true;
      toggle();
    },
    exitFullScreen() {
      this.isFullScreen = false;
      toggle();
    },
    input(char) {
      if (char === '<') {
        if (this.inputValue.length >= 1) {

          this.inputValue = this.inputValue.slice(0, -1);
        }

      } else if (char === 'cancel') {
        this.inputValue = '';
        this.editScoreShow = false;
        this.selectItem = null;
      } else if (char === 'confirm') {
        if (this.inputValue == '') {
          return;
        }
        this.confirmScore();
      } else {
        let value = this.inputValue + char;
        if (parseFloat(value) > this.selectItem.maxScore) {
          message.error('超出录入范围！');
        } else {
          this.inputValue = this.inputValue + char;
        }

      }
    },

    confirmScore() {
      console.log(this.selectItem)
      let that = this;
      let body = {
        objectType: this.selectItem.objectType,
        objectId: this.selectItem.objectId,
        groupId: this.selectItem.groupId,
        subId: this.selectItem.subId,
        count: this.selectItem.count,
        itemNo: this.selectItem.itemNo,
        type: this.selectItem.objectType,
        rawScore: this.inputValue,
      }
      const key = 'updatable';
      message.loading('上传中', key, 0);
      updateStuScore(body).then(response => {
        console.log(response);
        that.inputValue = '';
        that.editScoreShow = false;
        that.selectItem = null;
        that.getList();
        message.success({content: '上传成功!', key, duration: 2});
      });
    },
    /** 节点单击事件 */
    handleNodeClick(data) {
      let that = this;
      this.selectSubject = data.baseSubject;
      this.queryParams.subId = data.baseSubject.id;
      this.queryParams.subName = data.baseSubject.name;
      this.queryParams.type = data.baseSubject.type;
      that.orchestrateList = [];
      this.activeKey = [];
      this.getList();

    },
    showKeyboard(item) {
      this.$refs.keyBoard.showPopup(item.subjectWithItem);

    },
    showStuScore(item) {
      let conversionScore = '';
      if (item.subjectWithItem != null) {
        if (item.subjectWithItem.baseScoreMap['0'] != null) {
          conversionScore = item.subjectWithItem.baseScoreMap['0'].conversionScore;
        }
      }
      let sendInfo = {
        type: 'score',
        name: item.name,
        no: item.no,
        subName: this.queryParams.subName,
        objectType: item.objectType,
        objectId: item.objectId,
        subId: item.subId,
        groupId: this.queryParams.groupId,
      }

      showStuInfo(sendInfo).then(response => {
        console.log(response)
        this.getList();
      })
      // stuReady(item).then(response => {
      //   console.log(response)
      // })

    },
    stuReady(item) {
      console.log(JSON.stringify(item));
      let sendInfo = {
        type: 'ready',
        name: item.name,
        no: item.no,
        objectId: item.objectId,
        subId: item.subId,
        subName: this.queryParams.subName,
        objectType: item.objectType,
      }
      stuReady(item).then(response => {
        console.log(response)
      })
    },
    getList() {
      const key = 'getList';
      message.loading('刷新中', key, 0);
      let that = this;
      this.tableLoading = true;
      getScoreItem(this.queryParams).then(response => {
        console.log(response)
        that.orchestrateList = response.rows;
        that.total = response.total;
        that.tableLoading = false;
        message.success({content: '刷新完成!', key, duration: 2});
        // message.success({content: '上传成功!', key, duration: 2});
      }).catch(err => {
        that.orchestrateList = [];
        that.tableLoading = false;
        that.total = 0;
      });
    },
    onchangeGroup() {
      this.getList();
    },
    complete() {
      this.getList();
    }
  }
}
</script>

<style>
.back {
  background-image: url('../../../assets/images/lotterybk.jpg')
}

.fullscreen-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.border {
  background-image: url('../../../assets/images/border.png')
}

.keyboard2 {
  display: flex;
  flex-wrap: wrap;
  border-radius: 16px;
  background: #ececec;
}

.key2 {
  height: 64px;
  flex-basis: 25%;
  padding: 8px;
}

.key2 div {
  border-radius: 8px;
  background: white;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bolder;
}

.key2 div:hover {
  cursor: pointer;
}

.key2 div:active {
  background: #23b3ff;
}

.ant-collapse-header {
  align-items: center !important;
}

/*.confirmButton :active {*/
/*  background: #23b3ff;*/
/*}*/
</style>